<template>
  <div class="wholeMoneyOff pages">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm rule-form">
      <el-form-item label="活动名称" prop="activityName">
        <span v-if="status == 1">{{ruleForm.activityName}}</span>
        <el-input v-else v-model="ruleForm.activityName" maxlength="30" size="small" class="active-name"></el-input>
      </el-form-item>

      <el-form-item label="活动时间" prop="dates">
        <span v-if="status==1">{{activityStartTime}} 至 {{activityEndTime}}</span>
        <span v-else>
          <el-date-picker format="yyyy-MM-dd" v-model="ruleForm.dates" :disabled="status==1" size="small" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" clearable></el-date-picker>
        </span>
      </el-form-item>

      <el-form-item label="满减方式" v-if="this.$route.query.radio==4" required>
        <span v-if="status==1">满 {{ruleForm.sumOne}}减 {{ruleForm.jine}}</span>
        <div class="manjian" v-else>
          <span class="demonstration">总金额满</span>
          <el-form-item label prop="sumOne" class="rowItem">
            <el-input class="moneyInput" v-model="ruleForm.sumOne" placeholder="总金额"></el-input>
          </el-form-item>
          <span class="demonstration">元,减</span>
          <el-form-item label prop="jine" class="rowItem">
            <el-input class="moneyInput" v-model="ruleForm.jine" placeholder="扣减金额"></el-input>
          </el-form-item>
        </div>
      </el-form-item>

      <el-form-item label="打折方式" v-if="this.$route.query.radio==3" required>
        <span v-if="status==1">满 {{ruleForm.sumOne}} 元,按 {{ruleForm.discount}}%打折</span>
        <div class="manjian" v-else>
          <span class="demonstration">总金额满</span>
          <el-form-item label prop="sumOne" class="rowItem">
            <el-input v-model="ruleForm.sumOne" class="moneyInput" placeholder="总金额"></el-input>
          </el-form-item>
          <span class="demonstration">元,按</span>
          <el-form-item label prop="discount" class="rowItem">
            <el-input class="moneyInput" v-model="ruleForm.discount" placeholder="1-99的数字"></el-input>
          </el-form-item>
          <span class="demonstration">%打折</span>
        </div>
      </el-form-item>

      <el-form-item label="参与商品">
        <div class="merchandise">
          <el-button type="primary" :disabled="checked || status==1" @click="addGoods(20,1),dialogs.fromFLei='',dialogs.fromPai='',dialogs.inputTwo=''" size="mini">添加商品</el-button>
          <el-checkbox :disabled="status==1" @change="changeCheck" v-model="checked">全部商品</el-checkbox>
        </div>
      </el-form-item>
      <el-form-item label="分类" v-if="showSearch && !checked">
        <div class="classify">
          <el-cascader :props="{ checkStrictly: true }" :options="optionsOne" clearable v-model="ruleForm.valueOnes" size="small"></el-cascader>
          <span>品牌:</span>
          <el-select size="small" v-model="ruleForm.trademark" placeholder="请选择">
            <el-option v-for="(item, index) in brandListOne" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item v-if="showSearch && !checked">
        <div class="shuru">
          <el-input class="searchInput" v-model="ruleForm.writeContent" size="small" placeholder="请输入商品名称或条码号搜索"></el-input>
          <el-button type="primary" @click="searchOne" size="mini">搜索</el-button>
        </div>
      </el-form-item>
      <el-form-item v-if="!checked">
        <div class="commodity">
          <el-table :data="tableData" height="250" border style="width: 100%">
            <el-table-column prop="barCode" align="center" label="条码号" width="180"></el-table-column>
            <el-table-column prop="goodsName" align="center" label="商品名称" width="180"></el-table-column>
            <el-table-column prop="goodsParameterList" label="规格型号" align="center">
              <template slot-scope="scope">
                <span v-for="(item,index) in scope.row.goodsParameterList" :key="index">{{item.name}}:{{item.value}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="brandName" align="center" label="品牌"></el-table-column>
            <el-table-column prop="price" align="center" label="价格"></el-table-column>
            <el-table-column prop="goodsUnitName" align="center" label="单位"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="subtract(scope.$index,scope.row.id)" :disabled="status==1" type="text" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form-item>
      <el-form-item label="适用范围" prop="checkList">
        <el-checkbox-group v-model="ruleForm.checkList">
          <el-checkbox v-for="(item,index) in memberLevelList" :key="index" :label="item.id" :disabled="status==1">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="状态" prop="condition">
        <el-radio-group :disabled="status==1" v-model="ruleForm.condition">
          <el-radio label="0">上架</el-radio>
          <el-radio label="1">下架</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <div class="consequence" v-if="status == 1">
          <el-button type="primary" @click="onCopy" v-if="setRole('新增/编辑')" size="mini">复制</el-button>
          <el-button @click="goBack" size="mini">返回</el-button>
        </div>
        <div class="consequence" v-else>
          <el-button type="primary" @click="sureDialog = true" size="mini">发布</el-button>
          <el-button @click="countermand" size="mini">取消</el-button>
        </div>
      </el-form-item>
    </el-form>

    <!-- 弹框 -->
    <el-dialog title="选择商品" :visible.sync="paymentDialogVisibleOne"  :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="dialogs" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item label="分类">
          <div class="classify">
            <el-cascader :props="{ checkStrictly: true }" :options="optionsOne" clearable v-model="dialogs.fromFLei" size="small"></el-cascader>
            <span>品牌:</span>
            <el-select v-model="dialogs.fromPai" size="small" placeholder="请选择">
              <el-option v-for="(item, index) in brandListOne" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </el-form-item>

        <el-form-item>
          <el-input v-model="dialogs.inputTwo" size="small" class="searchInput" placeholder="请输入商品名称或条码号搜索"></el-input>
          <el-button type="primary" @click="searchTwo" size="mini">搜索</el-button>
        </el-form-item>

        <el-form-item>
          <el-table ref="multipleTable" :data="content" tooltip-effect="dark" tyle="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="barCode" label="条码号"></el-table-column>
            <el-table-column prop="goodsName" label="商品名称"></el-table-column>
            <el-table-column prop="goodsParameterList" label="规格型号" align="center">
              <template slot-scope="scope">
                <span v-for="(item,index) in scope.row.goodsParameterList" :key="index">{{item.name}}:{{item.value}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="brandName" label="品牌" show-overflow-tooltip></el-table-column>
            <el-table-column prop="price" label="价格" show-overflow-tooltip></el-table-column>
            <el-table-column prop="goodsUnitName" label="单位" show-overflow-tooltip></el-table-column>
          </el-table>
        </el-form-item>
        <page-unit :pageData="pageData" :func="addGoods"></page-unit>
        <el-form-item>
          <el-button size="small" @click="makeSure" type="primary">确定</el-button>
          <el-button size="small" @click="paymentDialogVisibleOne = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 弹框 -->
    <el-dialog title="发布" :visible.sync="sureDialog" width="600px" center :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <template>
        <div class="cont">
          <div class="contenttext">活动开始后活动内容将不能修改，确定发布吗？</div>
        </div>
        <div class="cont">
          <el-button algin="center" @click="confirms('ruleForm'),sureDialog = false" type="primary">发布</el-button>
          <el-button algin="center" @click="sureDialog = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import pageUnit from "@/components/Page";
import utils from "@/util";
import { mapState } from "vuex";
import {
  getGoodsClassifyTreeList,
  selectByGoodsId,
  getGoodsListForMarket,
  saveOrUpdateActivity,
  listMemberLevel,
  getActivityDetail,
  updateActivity,
  getMemberLevelList
} from "@/api";

export default {
  components: {
    pageUnit
  },
  data() {
    return {
      pageData: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      },
      sureDialog: false, //发布弹窗
      checked: false,
      activityStartTime: "",
      activityEndTime: "",
      paymentDialogVisibleOne: false, //添加商品弹框
      ruleForm: {
        //from---1
        dates: [], //时间范围
        activityName: "", //活动名称
        activityStartTime: "", //活动开始时间
        activityEndTime: "", //活动结束时间
        sumOne: "", //总金额
        jine: "", //扣减金额
        discount: "", //折扣
        valueOnes: [], //分类
        trademark: "", //品牌
        writeContent: "", //搜索框
        checkList: [], //多选框
        condition: "0" //上下架
      },
      optionsOne: [], //分类
      brandListOne: [], //品牌
      dialogs: {
        //from---2弹框
        fromFLei: "", //分类
        fromPai: "", //品牌
        inputTwo: "" //搜索
      },
      rules: {
        activityName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
        ],
        dates: [
          {
            // type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        sumOne: [
          { required: true, message: "请输入总金额", trigger: "blur" },
          { validator: utils.validatenum1, trigger: "blur" },
          { validator: utils.validateOperatingArea, trigger: "blur" }
        ],
        jine: [
          { required: true, message: "请输入扣减金额", trigger: "blur" },
          { validator: utils.validatenum1, trigger: "blur" },
          { validator: utils.validateOperatingArea, trigger: "blur" }
        ],
        discount: [
          { required: true, message: "请输入折扣", trigger: "blur" },
          { validator: utils.validatenum, trigger: "blur" },
          { validator: utils.validateParkingLot, trigger: "blur" }
        ],
        checkList: [
          {
            // type: "array",
            required: true,
            message: "请至少选择一个适用范围",
            trigger: "change"
          }
        ],
        condition: [
          { required: true, message: "请选择状态", trigger: "change" }
        ]
      },
      tableData: [],
      content: [],
      currentPage: 1,
      pageSize: 20, //页数
      pageNo: 1,
      totalItems: 0,
      selectArr: [], //表格选中事件
      allCategory: [], //全部商品
      goodsId: "", //商品id
      memberLevelList: [],
      id: "",
      status: 0,
      pickerOptions: {
        // 限制活动时间不让选择今天以前的
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        }
      },
      edit: false,
      showSearch: true, //搜索部分显示
      searchSaveData: [], //
      newadd: false
    };
  },
  computed: mapState(["merchantId", "sub", "userInfo", "linkName", "power"]),
  created() {
    this.gradeOf();
    this.id = utils.getQuery("id");
    if (utils.getQuery("status") == "2") {
      this.newadd = true;
      this.status = "0";
      this.edit = false;
    } else {
      this.newadd = false;
      this.status = utils.getQuery("status");
      this.edit = true;
    }
    if (utils.getQuery("status") == "0") {
      this.showSearch = true;
    } else {
      this.showSearch = false;
    }
    if (this.id) {
      this.getActiveDetail();
    }
  },
  mounted() {
    this.getGoodsClassifyTreeListOne();
    this.getBrandListOne();
  },
  methods: {
    // 获取活动详情
    //配置权限
    setRole(key) {
      return utils.selectTitle(this.power, key);
    },
    getActiveDetail() {
      let data = {
        id: this.id,
        pageNum: 1,
        pageSize: 5,
        goodsKeywords: "",
        classifyId: "",
        brandId: ""
      };
      getActivityDetail(data).then(res => {
        let data = res.data;
        this.ruleForm.activityName = data.activityName; //活动名称
        //活动时间
        this.ruleForm.dates.push(
          utils.foryear(data.activityStartTime),
          utils.foryear(data.activityEndTime)
        );
        this.activityStartTime = utils.foryear(data.activityStartTime);
        this.activityEndTime = utils.foryear(data.activityEndTime);
        this.ruleForm.sumOne = data.limitAmount; //总金额
        this.ruleForm.jine = data.discountAmount; //扣减金额
        this.ruleForm.discount = data.discountAmount;
        if (data.activityCrowd != 0) {
          this.ruleForm.checkList = data.activityCrowdList;
        } else {
          this.ruleForm.checkList = ["0"];
        }
        this.ruleForm.condition = data.status + ""; //上下架
        if (data.joinType == 0) {
          this.checked = true;
          this.tableData = [];
        } else {
          this.checked = false;
          this.tableData = data.goodsList;
          this.searchSaveData = data.goodsList;
        }
      });
    },
    addGoods(pageSize, pageNum) {
      this.paymentDialogVisibleOne = true;

      let primaryClassifyId =
        this.dialogs.fromFLei[this.dialogs.fromFLei.length - 1] || "";
      let params = {
        activityId: "", //活动id
        classifyId: primaryClassifyId, //末级分类id
        brandId: this.dialogs.fromPai,
        activityType: this.$route.query.radio, //活动类型 0-会员拉新，1-会员关怀 ,2-整单折扣，3-整单满减 4-单品变价
        shopId: this.merchantId, //登录商户id
        pageSize: this.pageData.pageSize,
        pageNo: this.pageData.currentPage,
        goodsKeywords: this.dialogs.inputTwo //商品关键字查询
      };
      if (this.status == 0) {
        params.activityId = this.id;
      }
      getGoodsListForMarket(params).then(res => {
        this.content = res.data.list;
        this.content.forEach(element => {
          if (element.price == 0) {
            element.price == "-";
          }
        });
        this.pageData.totalItems = res.data.total;
      });
    },
    confirms(formName) {
      console.log(this.ruleForm.checkList);
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (
            Number(this.ruleForm.jine) > Number(this.ruleForm.sumOne) &&
            this.$route.query.radio == 4
          ) {
            this.$message({
              message: "扣减金额不能大于总金额",
              type: "error"
            });
          } else {
            if (!this.checked) {
              if (this.tableData.length == 0) {
                this.$message({
                  message: "请添加商品",
                  type: "error"
                });
              } else {
                if (this.ruleForm.checkList.length != 0) {
                  this.submitdata();
                } else {
                  this.$message({
                    message: "请选择适用范围",
                    type: "error"
                  });
                }
              }
            } else {
              this.submitdata();
            }
          }
        } else {
          return false;
        }
      });
    },
    submitdata() {
      if (this.newadd == false) {
        this.tableData = this.searchSaveData;
        this.ruleForm.valueOnes = []; //分类
        this.ruleForm.trademark = ""; //品牌
        this.ruleForm.writeContent = ""; //搜索框
      }
      let goods = [];
      //新增页面
      for (let i = 0; i < this.tableData.length; i++) {
        const element = this.tableData[i];
        if (element.goodsClassifyList.length == 0) {
          element.goodsClassifyList = ["", "", ""];
        } else if (element.goodsClassifyList.length < 3) {
          if (element.goodsClassifyList.length == 1) {
            element.goodsClassifyList.concat(["", ""]);
          } else {
            element.goodsClassifyList.push("");
          }
        }

        goods.push({
          goodsId: element.goodsId, //商品id
          goodsName: element.goodsName, //商品名称
          primaryClassify: element.goodsClassifyList[0].id || "", //一级分类id
          secondaryClassify: element.goodsClassifyList[1].id || "", //二级分类id
          threeClassify: element.goodsClassifyList[2].id || "", //三级分类id
          brandId: element.brandId, //品牌ID
          goodsUnit: element.goodsUnit, //单位id
          primaryName: element.goodsClassifyList[0].name || "", //一级分类名称
          secondaryName: element.goodsClassifyList[1].name || "", //二级分类名称
          threeName: element.goodsClassifyList[2].name || "", //三级分类名称
          barCode: element.barCode, //条形码
          brandName: element.brandName, //品牌名称
          goodsUnitName: element.goodsUnitName, //单位名称
          price: element.price,
          memberPrice: element.memberPrice,
          goodsSpec: element.goodsParameterList, //商品规格
          goodsCode: element.goodsCode,
          code: element.code
        });
      }
      let discountWay = "" + this.ruleForm.sumOne + "," + this.ruleForm.jine;
      let ischecked = "";
      if (this.checked) {
        ischecked = 0;
      } else {
        ischecked = 1;
      }
      let activityCrowd = 0;
      let activityCrowdRue = "";
      if (this.ruleForm.checkList.indexOf("0") == -1) {
        activityCrowd = 2;
        activityCrowdRue = this.ruleForm.checkList.toString();
      } else {
        activityCrowd = 0;
        this.ruleForm.checkList.splice(this.ruleForm.checkList.indexOf("0"), 1);
        activityCrowdRue = "";
      }
      let discountAmount = "";
      if (this.$route.query.radio == 4) {
        discountAmount = this.ruleForm.jine;
      } else {
        discountAmount = this.ruleForm.discount;
      }
      let obj = {
        activityCrowd: activityCrowd, //活动人群，0-全部会员，1-注册会员，2-会员等级，3-自定义会员
        activityCrowdRue: activityCrowdRue, //活动人群自定义规则（activityCrowd=2时传值） 等级id,以逗号隔开
        activityEndTime: this.ruleForm.dates[1], //活动结束时间,
        activityName: this.ruleForm.activityName, //活动名称,
        activityStartTime: this.ruleForm.dates[0], //活动开始时间,
        activityType: this.$route.query.radio, //活动类型，0-会员拉新，1-会员关怀 2-整单折扣，3-整单满减 4-单品变价
        orgId: this.merchantId, //商户id
        goodsList: goods,
        // discountWay: discountWay, //满减方式：两个值用逗号隔开
        id: this.id, //活动id（用于修改活动）
        status: this.ruleForm.condition, //状态: 0-上架,1-下架
        joinType: ischecked, //参与商品类型：0-全部参与 1-指定参与 2-指定不参与
        limitAmount: this.ruleForm.sumOne, //使用限额 例:满(使用限额)
        discountAmount: discountAmount //优惠金额(折扣) 例:满(使用限额)减(优惠金额)或打(折扣)
      };
      if (this.linkName !== "" || this.linkName !== null) {
        obj.activityCreater = this.linkName; //活动创建人
      } else {
        obj.activityCreater = this.userInfo.mobile; //活动创建人
      }
      if (this.edit == false) {
        saveOrUpdateActivity(obj).then(res => {
          if (res.code == 200) {
            this.$message.success("添加成功");
            this.countermand();
          }
        });
      } else {
        updateActivity(obj).then(res => {
          if (res.code == 200) {
            this.$message.success("修改成功");
            this.countermand();
          }
        });
      }
    },
    gradeOf(pageSize, pageNum) {
      //会员等级
      let level = {
        orgId: this.merchantId
      };
      getMemberLevelList(level).then(res => {
        res.data.unshift({
          id: "0",
          name: "所有人"
        });
        this.memberLevelList = res.data;
      });
    },
    getGoodsClassifyTreeListOne() {
      //分类
      getGoodsClassifyTreeList().then(res => {
        let a = {
          value: "",
          label: "全部"
        };
        res.data.unshift(a);
        this.optionsOne = res.data;
      });
    },
    getBrandListOne() {
      //品牌
      selectByGoodsId({
        shopId: this.merchantId,
        // repositoryId: this.ruleForm.warehouse,
        keyword: this.brandInfo,
        type: "0"
      }).then(res => {
        res.data.list.unshift({
          id: "",
          name: "全部"
        });
        this.brandListOne = res.data.list;
        // var lists = JSON.stringify(this.brandListOne.goodsParameterList);
      });
    },
    toPage() {
      //跳页
      this.addGoods(this.pageSize, this.currentPage);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.addGoods(this.pageSize, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.addGoods(this.pageSize, this.currentPage);
    },
    handleSelectionChange(val) {
      //弹框表格选中事件
      this.selectArr = val;
    },
    makeSure() {
      //弹框确认按钮添加商品
      if (this.edit) {
        this.tableData = this.searchSaveData;
        this.ruleForm.valueOnes = []; //分类
        this.ruleForm.trademark = ""; //品牌
        this.ruleForm.writeContent = ""; //搜索框
      }
      let arr = [];
      if (this.tableData.length > 0) {
        for (let i = 0; i < this.selectArr.length; i++) {
          var flag = true;
          for (let y = 0; y < this.tableData.length; y++) {
            if (this.selectArr[i].id == this.tableData[y].id) {
              flag = false;
            }
          }
          if (flag) {
            arr.push(this.selectArr[i]);
          }
        }
        this.tableData = this.tableData.concat(arr);
      } else {
        this.tableData = this.selectArr;
      }
      if (this.edit) {
        this.searchSaveData = this.tableData;
      }
      this.paymentDialogVisibleOne = false;
    },
    searchTwo() {
      //弹框页面搜索
      //
      this.addGoods(20, 1);
    },
    changeCheck() {
      if (this.checked) {
        this.tableData = [];
      }
    },
    countermand() {
      //页面取消按钮
      utils.routerTo("/marketing-center/pos-activity/new-whole");
    },
    //页面搜索
    searchOne() {
      let primaryClassifyId =
        this.ruleForm.valueOnes[this.ruleForm.valueOnes.length - 1] || "";
      let params = {
        id: this.id, //活动id
        classifyId: primaryClassifyId, //末级分类id
        brandId: this.ruleForm.trademark,
        // activityType: this.$route.query.radio, //活动类型 0-会员拉新，1-会员关怀 ,2-整单折扣，3-整单满减 4-单品变价
        pageSize: "",
        pageNum: "",
        goodsKeywords: this.ruleForm.writeContent //商品关键字查询
      };
      getActivityDetail(params).then(res => {
        this.tableData = res.data.goodsList;
      });
    },
    subtract(idx, id) {
      //页面删除
      let that = this;
      this.$confirm("确定要将商品移出本活动吗？", {
        distinguishCancelAndClose: false,
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          if (!that.newadd) {
            that.searchSaveData.splice(that.searchSaveData.indexOf(id), 1);
          }
          that.tableData.splice(idx, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //复制信息
    onCopy() {
      this.status = 0;
      this.id = "";
      this.edit = false;
      this.ruleForm.dates = [];
      this.newadd = true;
    },
    // 返回按钮
    goBack() {
      history.back();
    }
  }
};
</script>

<style scoped>
.wholeMoneyOff {
  width: 1100px;
  padding: 40px 0 60px 0;
  margin-left: 20px;
}
.nameOne {
  width: 350px;
}
.searchInput {
  width: 400px;
  /* display: flex; */
}
.rangeOfApplication {
  display: flex;
}
.rangeOfApplication {
  margin: 20px 0 20px 20px;
}
.consequence {
  width: 50%;
  margin: auto;
  padding: 20px 0 40px 0;
  display: flex;
  justify-content: space-around;
}
.active-name {
  width: 458px;
}
.item {
  margin-right: 40px;
}
.el-checkbox-group {
  display: inline-block;
}
.moneyInput {
  width: 150px;
  display: inline-block;
}
.searchInput {
  width: 200px;
}
.rowItem {
  display: inline-block;
}
.contenttext {
  width: 100%;
  text-align: center;
  margin: 30px 0;
}
.cont {
  width: 100%;
  text-align: center;
}
</style>


